.p-rule {
  height: 100vh;

  > .inner {
    padding: 36px 0;
  }

  .action {
    position: absolute;
    right: 48px;
    top: -12px;
    @include square(20px);
    @include borderRadius(3px);
    padding: 3px;
    box-sizing: border-box;
    color: #31d5ff;
    background: rgba(49, 213, 255, 0.4);

    .antd-mobile-icon {
      vertical-align: top !important;
    }
  }

  .cp-pop-2 {
    margin: 0 auto;

    > .inner {
      font-size: 12px;
      text-align: left;
      padding: 8px;
      width: calc(100% - 60px);

      .header {
        font-size: 14px;
        text-align: center;
        background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), #3ccfff, rgba(255, 255, 255, 0));
        background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), #3ccfff, rgba(255, 255, 255, 0));
        background: -webkit-linear-gradient(to right, rgba(255, 255, 255, 0), #3ccfff, rgba(255, 255, 255, 0));
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #3ccfff, rgba(255, 255, 255, 0));
        margin-bottom: 16px;
      }

      img {
        width: 100%;
      }

      .title {
        background: #1774eb;
        color: #fff;
        display: inline-block;
        padding: 6px 0px 5px 4px;
        line-height: 12px;
        position: relative;

        &:after {
          top: 0;
          left: 90%;
          content: "";
          position: absolute;
          background: #1774eb;
          height: 100%;
          width: 15px;
          transform: skew(30deg);
        }
      }
      
      font{
        color: #31eeff;
      }

      p {
        line-height: 20px;
      }

      .act-btn{
        display: block;
        margin: 0 auto;
      }
    }
  }
}